"use client";
import { Button, Card, message, Spin } from "antd";
import Title from "antd/es/typography/Title";
import TagList from "@/components/TagList";
import MdViewer from "@/components/MdViewer";
import { StarFilled, StarOutlined,EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
import { useState,useEffect } from "react";
import { addCollectUsingPost,deleteCollectUsingPost,existCollectUsingGet } from "@/api/collectController";
import useAddUserSignInRecord from "@/hooks/useAddUserSignInRecord";
import "./index.css";

interface Props {
  question: API.QuestionVO;
}

/**
 * 题目卡片
 * @param props
 * @constructor
 */
const QuestionCard = (props: Props) => {
  // 在进入到题目详情页时，会自动调用打卡接口。
  useAddUserSignInRecord();
  const { question } = props;
  const [collectLoading, setCollectLoading] = useState(false);
  const [isCollected, setIsCollected] = useState(false);
  const [initLoading, setInitLoading] = useState(true);
  const [answerVisible, setAnswerVisible] = useState(false);

useEffect(() => {
  const checkCollect = async () => {
    try {
      const res = await existCollectUsingGet({ questionId: Number(question.id) });
      console.log(res+"yyuu");
      setIsCollected(res.data);
    } catch (e) {
      message.error('获取收藏状态失败');
    } finally {
      setInitLoading(false);
    }
  };
  checkCollect();
}, [question.id]);

  const handleCollect = async () => {
    try {
      setCollectLoading(true);
      const result = isCollected 
        ? await deleteCollectUsingPost({ questionId: Number(question.id) })
        : await addCollectUsingPost({ questionId: Number(question.id) });
      
      if (result) {
        setIsCollected(!isCollected);
        message.success(isCollected ? '已取消收藏' : '收藏成功');
      }
    } catch (e) {
      message.error('操作失败');
      setIsCollected(prev => !prev); // 回滚状态
    } finally {
      setCollectLoading(false);
    }
  };

  return (
    <div className="question-card">
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Title level={1} style={{ fontSize: 24 }}>
            {question.title}
          </Title>
          <Spin spinning={collectLoading || initLoading}>
            <Button 
              icon={isCollected ? <StarFilled /> : <StarOutlined />}
              type={isCollected ? 'primary' : 'default'}
              onClick={handleCollect}
            >
              {isCollected ? '已收藏' : '收藏'}
            </Button>
          </Spin>
        </div>
        <TagList tagList={question.tagList} />
        <div style={{ marginBottom: 16 }} />
        <MdViewer value={question.content} />
      </Card>
      <div style={{ marginBottom: 16 }} />
      <Card title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span>推荐答案</span>
            <Button 
              icon={answerVisible ? <EyeInvisibleOutlined /> : <EyeOutlined />}
              onClick={() => setAnswerVisible(!answerVisible)}
              style={{ marginLeft: 8 }}
              type="text">
                {answerVisible ? '隐藏答案' : '显示答案'}
              </Button>
          </div>
        }>
        {answerVisible && <MdViewer value={question.answer} />}
      </Card>
    </div>
  );
};

export default QuestionCard;
